import { FC } from 'react'
import styles from './QuestionCard.module.scss'

type PropsType = {
  id: string
  title: string
  isStar: boolean
  isPublished: boolean
  answerCount: number
  createdAt: string
  // eslint-disable-next-line no-unused-vars
  deleteQuestion?: (id: string) => void
  // eslint-disable-next-line no-unused-vars
  updateQuestion?: (id: string) => void
}

const QuestionCard: FC<PropsType> = (props) => {
  // eslint-disable-next-line no-unused-vars
  function _edit(id: string) {
    props.updateQuestion && props.updateQuestion(id)
  }
  // eslint-disable-next-line no-unused-vars
  function _delete(id: string) {
    props.deleteQuestion && props.deleteQuestion(id)
  }
  const { id, title, isPublished, answerCount, createdAt } = props
  return (
    <div className={styles.container}>
      <div className={styles.title}>
        <div className={styles.left}>
          <a href={`/question/${id}`} target="_blank" rel="noreferrer">
            {title}
          </a>
        </div>
        <div className={styles.right}>
          {isPublished ? (
            <span style={{ color: 'green' }}>已发布</span>
          ) : (
            <span style={{ color: 'red' }}>未发布</span>
          )}
          <span>答卷：{answerCount}</span>
          <span>创建时间：{createdAt}</span>
        </div>
      </div>
      <div className={styles['button-container']}>
        <div className={styles.left}>
          <button>编辑问卷</button>
          <button>数据统计</button>
        </div>
        <div className={styles.right}>
          <button>标星</button>
          <button>复制</button>
          <button>删除</button>
        </div>
      </div>
    </div>
  )
}

export default QuestionCard
